<template>

	<view>
		<view class="title">
			免密登录
		</view>
		<view class="MobilePhoneNumber">
			<input type="text" maxlength="11" placeholder="请输入手机号" auto-focus v-model="shouJi" />
		</view>
		<view class="VerificationCode">
			<input type="text" maxlength="8" placeholder="请输入验证码" v-model="yanZhengMa" />
			<view @click="faSongYanZhengMa()">发送验证码</view>
		</view>
		<view class="Login">
			<button type="primary" @click="dengLu()">登录</button>
			<view>
				<navigator url="/pages/ForgotPassword/ForgotPassword">密码登录</navigator>
				<view></view>
				<navigator url="/pages/register/register">注册</navigator>
			</view>
		</view>

	</view>

</template>

<script>
	uni.setStorageSync("ulr", "http://124.93.196.45:10001")
	var ulr = uni.getStorageSync("ulr")
	export default {
		data() {
			return {
				shouJi: "",
				yanZhengMa: ""
			}
		},
		onLoad() {

		},
		methods: {
			async faSongYanZhengMa() {
				const response = await uni.request({
					method: 'GET',
					// 15666667777
					url: ulr + "/dev-api/sms/captcha",
					data: {
						"phoneNumber": this.shouJi
					},
				})
				if (response.data.code == 500) {
					uni.showToast({
						title: response.data.msg,
						icon: 'none',
						duration: 2000
					})
				} else {
					uni.showToast({
						title: "验证码已发送",
						icon: 'none',
						duration: 2000
					})
				}
			},
			async dengLu() {
				const response = await uni.request({
					method: 'POST',
					url: ulr + "/dev-api/sms/login",
					data: {
						"mobile": this.shouJi,
						"smsCode": this.yanZhengMa
					}
				})
				if (response.data.code == 500) {
					uni.showToast({
						title: response.data.msg,
						icon: 'none',
						duration: 2000
					})
				} else {
					uni.setStorageSync("token", response.data.token)
					uni.showToast({
						title: "登陆成功"
					})
				}
			}
		}
	}
</script>

<style scoped>
	.title {
		padding-top: 40rpx;
		background-color: #007aff;
		width: 100vw;
		height: 100rpx;
		font-size: 56rpx;
		line-height: 100rpx;
		text-align: center;
		color: white;
	}

	.MobilePhoneNumber {
		margin: 100rpx 0;
		display: flex;
		justify-content: center;
		line-height: 10vh;
		font-size: 80rpx;
	}

	.MobilePhoneNumber>input {
		width: 30vw;
		font-size: 60rpx;
		line-height: 7vh;
		height: 7vh;
		text-align: center;
		border: 2px solid #000;
		border-radius: 10rpx;
		padding: 5rpx;
	}


	.VerificationCode {
		margin: 100rpx 0;
		display: flex;
		justify-content: center;
		line-height: 10vh;
		font-size: 40rpx;
	}

	.VerificationCode>input {
		width: 20vw;
		font-size: 60rpx;
		height: 7vh;
		text-align: center;
		border: 2px solid #000;
		border-radius: 10rpx;
		padding: 5rpx;
	}

	.VerificationCode>view {
		text-decoration: underline;
		padding-left: 10rpx;
		width: 10vw;
	}

	.VerificationCode>view:hover {
		color: blue;
	}

	.Login {}

	.Login>button {
		font-size: 50rpx;
		width: 30vw;
	}

	.Login>view {
		margin: 10rpx;
		display: flex;
		justify-content: center;

	}

	.Login>view>navigator {
		text-decoration: underline;
		width: 150rpx;
		text-align: center;
	}

	.Login>view>view {
		margin: 5rpx;
		height: 35rpx;
		border: 1px solid #000;

	}

</style>